import React, { forwardRef, useEffect, useRef } from 'react';
import ProForm, {
  ProFormDatePicker,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { ProFormText } from '@ant-design/pro-form';
import REAccount from '@/utils/regexp/REAccount';
import CustomUpload from '@/components/Uploads';
import { Col, Radio, Row, Space } from 'antd';
import { useModel } from 'umi';

const DataForm: React.FC = forwardRef((props, ref) => {
  const formRef = useRef();
  //数据模型
  const adminModel = useModel('admin.admin', (model) => ({
    data: model.data,
    setData: model.setData,
    create: model.create,
    update: model.update,
  }));
  //这种方式实现模型数据异步渲染到表单
  useEffect(() => {
    let abortController = new AbortController();
    if (formRef.current) {
      formRef.current.setFieldsValue(adminModel.data);
    }
    return () => {
      abortController.abort();
    };
  }, [adminModel.data]);

  return (
    <ProForm name={'admin'}
      formRef={formRef}
      layout={'horizontal'}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      width={500}
      autoFocusFirstInput={true}
      onFinish={async (values) => {
        let res = {};
        if (values.id > 0) {
          res = await adminModel.update(values, { notice: true });
        } else {
          res = await adminModel.create(values, { notice: true });
        }
        await props.onSubmit(res);
      }}
      scrollToFirstError={true}
      submitter={{
        searchConfig: {
          resetText: '重置',
          submitText: '提交',
        },
        // 配置按钮的属性
        resetButtonProps: {
          style: {
            // 隐藏重置按钮
            display: 'none',
          },
        },
        submitButtonProps: {},
        // 自定义整个区域
        render: (props, doms) => {
          return (
            <Row>
              <Col span={14} offset={8}>
                <Space>{doms}</Space>
              </Col>
            </Row>
          );
        },
      }}
    >
      <ProFormText name="id" hidden label="id" />
      <ProFormText
        label="用户名"
        name="username"
        initialValue=""
        tooltip={REAccount.username(1, 20).msg}
        placeholder="请输入用户名"
        rules={[
          {
            type: 'string',
            required: true,
            pattern: REAccount.username(1, 20).reg,
            message: REAccount.username(1, 20).msg,
          },
        ]}
      />
      <ProFormText
        label="真实姓名"
        name="realname"
        initialValue=""
        placeholder="请输入真实姓名"
        rules={[
          {
            type: 'string',
            pattern: REAccount.realname(2, 20).reg,
            message: REAccount.realname(2, 20).msg,
          },
        ]}
      />
      <ProFormText
        label="昵称"
        name="nickname"
        initialValue=""
        rules={[
          {
            type: 'string',
            required: true,
            pattern: REAccount.nickname(2, 20).reg,
            message: REAccount.nickname(2, 20).msg,
          },
        ]}
      />
      <ProFormText.Password
        label="密码"
        name="password"
        initialValue=""
        fieldProps={{
          autoComplete: 'new-password',
        }}
        rules={[
          {
            type: 'string',
            pattern: REAccount.password(5, 20, 3).reg,
            message: REAccount.password(5, 20, 3).msg,
          },
        ]}
      />
      <ProForm.Item label="头像" name="avatar" initialValue="">
        <CustomUpload accept=".jpg,.png" maxCount={1} />
      </ProForm.Item>
      <ProFormText name="email" label="邮箱" initialValue="" />
      <ProFormText name="mobile" label="手机号" initialValue="" />
      <ProFormDatePicker name="birthday" label="生日" />
      <ProForm.Item
        label="性别"
        name="gender"
        rules={[{ type: 'enum', enum: [0, 1, 2] }]}
      >
        <Radio.Group>
          <Radio value={1}>男</Radio>
          <Radio value={2}>女</Radio>
        </Radio.Group>
      </ProForm.Item>
      <ProForm.Item
        label="状态"
        name="status"
        rules={[{ type: 'enum', enum: [0, 1, 2, 3] }]}
      >
        <Radio.Group>
          <Radio value={1}>未激活</Radio>
          <Radio value={2}>正常</Radio>
          <Radio value={3}>冻结</Radio>
        </Radio.Group>
      </ProForm.Item>
      <ProFormTextArea name="remark" label="备注" initialValue="" />
    </ProForm>
  );
});

export default DataForm;
